<template>
  <div class="selectStoreBox">
    <div class="inputSerachBox center">
      <div class="inputSerachBox2">
        <input type="text" class="inputSerach" v-model="serchData" />
        <div class="blackCircle center">
          <el-icon color="white" class="RigthIcon" @click="serchFn"><Right /></el-icon>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="storeListRow">
        <div class="carList">
          <div @click="selectStoreFn(item)" class="" v-for="item in storeList" :key="item.id">
            <div class="center storeCard">
              <div class="Avatar">
                <img :src="item.logo" alt="" srcset="" />
                <!-- <el-avatar :size="100" :src="item.logo" /> -->
              </div>
            </div>
            <div class="center storeText">{{ item.name }}</div>
          </div>
        </div>

        <!-- <el-row>
          <el-col @click="selectStoreFn(item)" :span="4" v-for="item in storeList" :key="item.id">
            <div class="center storeCard">
              <div class="Avatar">
                <el-avatar :size="100" :src="item.logo" />
              </div>
            </div>
            <div class="center storeText">{{ item.name }}</div>
          </el-col>
        </el-row> -->
      </div>
    </div>

    <div class="pageButton center" v-if="total > 0">
      <div>
        <el-icon @click="pageFn(-1)" class="ArrowLeftBold" size="50" :color="ArrowLeftBoldColor"
          ><ArrowLeftBold
        /></el-icon>
      </div>
      <div>
        <el-icon @click="pageFn(1)" class="ArrowRightBold" size="50" :color="ArrowRightBoldColor"
          ><ArrowRightBold
        /></el-icon>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getstorelist } from '@/http/api/my.js'
import { carList, carBrandSerach2 } from '@/http/api/car.js'
import { ref, reactive, onMounted, defineEmits } from 'vue'
let pageData = reactive({
  page: 1,
  size: 12,
  status: 1
})
let total = ref(0)
let storeList = ref([])
let emit = defineEmits(['getStoreList'])
let serchData = ref('')
const getStoreLIst = async () => {
  let data = {
    ...pageData,
    serchData: serchData.value
  }
  const res = await carBrandSerach2(data)
  storeList.value = res.res
  total.value = res.total
  if (pageData.page * pageData.size <= 12) {
    ArrowLeftBoldColor.value = '#717171'
  }
  if (total.value <= 10) {
    ArrowRightBoldColor.value = '#717171'
  }
}
const serchFn = async () => {
  getStoreLIst()
}
let ArrowLeftBoldColor = ref('#ffdd00')
let ArrowRightBoldColor = ref('#ffdd00')
const pageFn = (data) => {
  if (data < 0) {
    if (pageData.page * pageData.size != 12) {
      pageData.page = pageData.page + data == 0 ? 1 : pageData.page + data
      getStoreLIst()
      ArrowRightBoldColor.value = '#ffdd00'
    } else {
      ArrowLeftBoldColor.value = '#717171'
    }
  } else {
    if (pageData.page * pageData.size <= total.value) {
      pageData.page = pageData.page * pageData.size < total.value ? pageData.page + data : pageData.page
      getStoreLIst()
      ArrowLeftBoldColor.value = '#ffdd00'
      if (pageData.page * pageData.size >= total.value) {
        ArrowRightBoldColor.value = '#717171'
      }
    } else {
      ArrowRightBoldColor.value = '#717171'
      console.log(ArrowRightBoldColor, 888)
    }
  }

}
const selectStoreFn = (data) => {
  emit('getStoreList', data)
}
onMounted(() => {
  getStoreLIst()
})
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  color: white;
  font-size: 22px;
}
::v-deep .el-select__selected-item {
  color: white;
}
.storeText {
  color: white;
}
.inputSerach {
  border: none;
  width: 950px;
  height: 70px;
  border-radius: 20px;
}
.inputSerach:focus {
  border: none !important;
  outline: none;
}
.inputSerachBox {
  position: relative;
  cursor: pointer;
}
.inputSerachBox2 {
  cursor: pointer;
  width: 780px;
  height: 70px;
  border-radius: 20px;
  background: white;
}
.blackCircle {
  background: black;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  position: absolute;
  right: 120px;
  top: 50%;
  transform: translateY(-50%);
}
.RigthIcon {
  font-size: 25px;
}
::v-deep .el-dialog__header {
  padding: 0 !important;
}
.selectStoreBox {
  width: 100%;
  height: 500px;
  background: #15191a;
  padding-top: 20px;
}

.storeCard {
  cursor: pointer;
  width: 132px;
  height: 132px;
  .Avatar {
    width: 110px;
    height: 110px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.pageButton {
  width: 100%;
  margin-top: 20px;
}
.storeListRow {
  width: 800px;
  height: 300px;
  margin-top: 10px;
}
.ArrowLeftBold {
  cursor: pointer;
}
.ArrowRightBold {
  cursor: pointer;
}
.ArrowLeftBold:active {
  color: black;
}
.ArrowRightBold:active {
  color: black;
}
.carList {
  display: flex;
  flex-wrap: wrap;
}
</style>